@extends('layouts.app')

@section('content')
    <div class="container-fluid">

        <div class="row">

            <div class="col-12 col-sm-9">


                <div class="card bg-light mb-3" >
                    <div class="card-header">{{$room_info->title}}</div>
                    <div class="card-body">
                        <script src="../../rtmp_sample_player_flowplayer/flowplayer-3.2.8.min.js"></script>
                        <div href="#" style="display:block;height:768px" id="my_player"></div>

                    </div>
                </div>


            </div>

			 <div class="col-4 col-sm-1">
                {{--<nav class="nav flex-column">--}}
                    {{--<a class="nav-link active" href="#">Active</a>--}}
                    {{--<a class="nav-link" href="#">Link</a>--}}
                    {{--<a class="nav-link" href="#">Link</a>--}}
                    {{--<a class="nav-link disabled" href="#">Disabled</a>--}}
                {{--</nav>--}}
                <div class="card bg-light mb-3" >
                    <div class="card-header">在线会员</div>
                    <div class="card">
                        <ul class="list-group list-group-flush" id="user_list">
                        </ul>
                    </div>
                </div>
            </div>


            <div class="col-8 col-sm-2">
                {{--<div class="">--}}
                    {{--<nav>--}}
                        {{--<div class="nav nav-tabs" id="nav-tab" role="tablist">--}}
                            {{--<a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">周贡榜</a>--}}
                            {{--<a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">粉丝榜</a>--}}
                            {{--<a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">贵宾</a>--}}
                        {{--</div>--}}
                    {{--</nav>--}}
                    {{--<div class="tab-content" id="nav-tabContent">--}}
                        {{--<div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">--}}
                            {{--<div class="card">--}}
                                {{--<ul class="list-group list-group-flush">--}}
                                    {{--<li class="list-group-item">土豪哥</li>--}}
                                    {{--<li class="list-group-item">土豪大叔</li>--}}
                                    {{--<li class="list-group-item">土豪小王子</li>--}}
                                {{--</ul>--}}
                            {{--</div>--}}
                        {{--</div>--}}
                        {{--<div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">--}}
                            {{--<div class="card">--}}
                                {{--<ul class="list-group list-group-flush">--}}
                                    {{--<li class="list-group-item">穷屌丝</li>--}}
                                    {{--<li class="list-group-item">土肥圆</li>--}}
                                    {{--<li class="list-group-item">矮挫丑</li>--}}
                                {{--</ul>--}}
                            {{--</div>--}}
                        {{--</div>--}}
                        {{--<div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">--}}
                            {{--<div class="card">--}}
                                {{--<ul class="list-group list-group-flush">--}}
                                    {{--<li class="list-group-item">王老板</li>--}}
                                    {{--<li class="list-group-item">陈书记</li>--}}
                                    {{--<li class="list-group-item">李市长</li>--}}
                                {{--</ul>--}}
                            {{--</div>--}}
                        {{--</div>--}}
                    {{--</div>--}}
                {{--</div>--}}

                {{--<hr>--}}
                {{--聊天区域--}}
                <div class="card">
                    <div class="card-header">
                        聊天区
                    </div>
                    <div class="card-body overflow-auto" id="talk" style="height:400px; max-height:400px; overflow-y:scroll; " >
                        <p class="card-text">欢迎“{{$user_info->name}}”来到“{{$room_info->title}}”直播间，文明聊天，谢谢合作……</p>
                    </div>
                </div>
                {{--聊天区域结束--}}

                {{--发送消息--}}
                <div class="input-group mb-3">
                    {{--<select class="custom-select" id="inputGroupSelect01">--}}
                        {{--<option selected>所有人</option>--}}
                        {{--<option value="1">One</option>--}}
                        {{--<option value="2">Two</option>--}}
                        {{--<option value="3">Three</option>--}}
                    {{--</select>--}}
                    <input type="text" class="form-control" placeholder="请输入对他/她说的话..." id="msg">
                    <div class="input-group-append">
                        <span class="btn btn-primary" onClick="send()" onkeydown="onKeyDown(event)">发送</span>
                    </div>
                </div>
                {{--发送消息结束--}}

            </div>


        </div>

    </div>

    {{--websocket代码--}}


    <script type="text/javascript">

        // 打开一个 web socket
        var ws = new WebSocket("ws://106.12.22.78:9502");

        ws.onopen = function()
        {
            // Web Socket 已连接上，使用 send() 方法发送数据
            send("连接成功");
        };

        ws.onmessage = function (evt)
        {

            var obj = JSON.parse(evt.data);
            console.log(obj);
            //判断是用户列表还是消息
            if(obj.type=='msg')
            {
                var received_msg =  '<p>'+obj.nickname+'：'+obj.data+'</p>';
                var  talk = document.getElementById('talk').innerHTML;
                talk += '\n' +received_msg;
                document.getElementById('talk').innerHTML = talk;
                document.getElementById('msg').value ='';

                var scrollDom = document.getElementById('talk');
                scrollDom.scrollTop = scrollDom.scrollHeight
            }else if(obj.type=='userlist')
            {
                var user_list = '';
                $.each( obj.data, function(i,row){
                    user_list+='<li class="list-group-item">'+row.name+'</li>';
                    console.log(row);
                });
                document.getElementById('user_list').innerHTML = user_list;
            }

        };

        ws.onclose = function()
        {
            // 关闭 websocket
            alert("连接已关闭...");
        };

        function send(content)
        {
            if(content)
            {
                var msg = content;
            }else{
                var msg = document.getElementById('msg').value;
            }
            if(!msg)
            {
                alert('请输入聊天内容');
                return false;
            }
            var msgObj={room_id:{{$room_info->id}},user_id:{{$user_info->id}},nickname:'{{$user_info->name}}',msg:msg};
            ws.send(JSON.stringify(msgObj));
        }

        $(document).ready(function(){
            // 按回车发送消息
            $(document).keydown(function (event) {
                if (event.keyCode == 13) {
                    send();
                }
            });
            flowplayer("my_player", "../../rtmp_sample_player_flowplayer/flowplayer-3.2.8.swf",{
                clip: {
                    url: '{{$room_info->flow_name}}',
                    provider: 'rtmp',
                    live: true,
                },
                plugins: {
                    rtmp: {
                        url: '../../rtmp_sample_player_flowplayer/flowplayer.rtmp-3.2.8.swf',
                        netConnectionUrl: 'rtmp://106.12.22.78:1935/hls'
                    }
                }
            });
        });

    </script>



@endsection

